<template>
  <el-form-item label="短信验证123" :prop="prop">
  <el-input :value="value" type="text" auto-complete="off" clearable >
    <div slot="append" class="valiCode">
      <el-button type="text" @click="getCode" :disabled="isSend" :class="{'disabled': isSend}">{{validateText}}</el-button>
    </div>
  </el-input>
  </el-form-item>
</template>

<script>
  import {FormItem, Input, Button} from 'element-ui'
  export default {
    name: 'sendMesCode',
    components: {
      elFormItem: FormItem,
      elInput: Input,
      elButton: Button
    },
    props: {
      value: '',
      prop: Array
    },
    data () {
      return {
        time: 0
      }
    },
    computed: {
      isSend () {
        return this.time > 0
      },
      validateText () {
        return this.time > 0 ? '重新发送' + this.time + 's' : '发送验证码'
      }
    },
    watch: {
      time (newV, oldV) {
        let t
        if (newV <= 0) {
          clearTimeout(t)
          this.time = 0
        } else {
          t = setTimeout(() => {
            this.time--
          }, 1000)
        }
      }
    },
    methods: {
      getCode () {
        this.time = 60
        this.$emit('getCode')
      }
    }
  }
</script>

<style lang="scss" scoped>
 .valiCode{
    width: 74px;
    text-align: center;
    padding: 5px 4px;
    color:#2A91D2;
    & > .disabled {
      color:#666666
    }
  }
</style>
